<script lang="ts" setup>
import { ref, reactive, computed, watch, onMounted, provide } from 'vue';
import IndexTreeHeader from '../components/IndexTreeHeader/index.vue';
import API from '@/services';
import { IconEdit, IconDelete } from '@arco-design/web-vue/es/icon';
import * as RouteNames from '@/router/consts';
import { useRouter, useRoute } from 'vue-router';
import MetricsTreeDetail from './metricsTreeDetail/index.vue';
import { useStore } from '@/store';
import Delete from '@/assets/images/delete.svg';
import TreeEditIcon from '@/assets/images/tree_edit_icon.svg';
import { Message, Modal } from '@arco-design/web-vue';
const store = useStore();
const router = useRouter();
const route = useRoute();
let id = ref<any>(route.query.id);
const sourceType = route.query.source;
const isNotMicroApp = ref<boolean>(true);
isNotMicroApp.value = !window.__MICRO_APP_ENVIRONMENT__;
if (isNotMicroApp.value) {
  document.getElementsByTagName('body')[0].className = 'metrics-not-micro-app';
}
const metricsName = computed(() => store.state.indextree.metricsTreeName);
const metricsPublish = computed(() => store.state.indextree.metricsPublish);
const handleDeleteAllTree = async () => {
  if (metricsPublish.value) {
    Message.error('该看板已发布，请先下线再删除');
    return;
  }
  Modal.confirm({
    modalClass: 'model-message-confirm',
    title: '是否确定删除该看板？',
    content: '删除后不可恢复',
    simple: false,
    closable: true,
    okText: '确认删除',
    okButtonProps: {
      style: {
        backgroundColor: '#FF1A3B'
      }
    },
    onBeforeOk: (done) => {
      DeleteTree(id.value);
      done(true);
    }
  });
};
const DeleteTree = async (boardId: any) => {
  try {
    const { code, data } = await API.metricsTree.deleteByBoardId({ boardId });
    if (code === 200) {
      Message.success('删除成功');
      router.go(-1);
    }
  } catch (error) {}
};
</script>

<template>
  <section>
    <header class="metrics-detail-graph">
      <index-tree-header class="detail-tree-header">
        <template #left>
          <span class="detailTitleName"
            >{{ metricsName
            }}<span
              style="
                margin-left: 18px;
                color: #9b9fab;
                font-weight: normal;
                font-size: 14px;
              "
              >{{ 'ID: ' + route.query.id }}</span
            ></span
          >
        </template>
        <template #right>
          <div v-if="sourceType != 'public'" class="right-icon">
            <div class="icon-background">
              <img
                :src="TreeEditIcon"
                alt=""
                @click="
                  () => {
                    router.push({
                      name: RouteNames.ROUTER_INDEXTREE_INFO,
                      query: {
                        id
                      }
                    });
                  }
                "
              />
            </div>
            <div class="icon-background ml-12">
              <img :src="Delete" alt="" @click="handleDeleteAllTree" />
            </div>
          </div>
        </template>
      </index-tree-header>
    </header>
    <main>
      <div
        class="index-wrapper"
        :style="{ marginTop: isNotMicroApp ? '60px' : '0' }"
      >
        <metrics-tree-detail></metrics-tree-detail>
      </div>
    </main>
  </section>
</template>

<style lang="scss" scoped>
.detailTitleName {
  font-size: 16px;
  font-weight: bold;
}
.index-wrapper {
  display: flex;
  // height: 100%;
  background: #eff1f7;
  // margin-top: 60px;
  height: calc(100vh - 60px);
  min-height: auto;
}
.right-icon {
  display: flex;
  .icon-background {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f6f8fc;
    border-radius: 3px;
    cursor: pointer;
    img {
      width: 20px;
      height: 20px;
    }
  }
}
.metrics-detail-graph {
  height: 60px;
  width: 100%;
  z-index: 100;
  position: fixed;
  left: 0;
  top: 0;
}
</style>
